
<template>
  <div class="page">
    <div class="contentBoX">
      <div class="logo">
        <img alt="标题Icon" src="@/assets/img/loginIcon.png" class="icon" />
        <span class="title">物业管理系统</span>
      </div>
      <span class="subtitle">一个高效管理小区的智慧系统，为了效率而生</span>
      <div class="loginBox">
        <a-form
          :model="login"
          ref="loginForm"
          style="margin:8px 16px"
        >
          <a-form-item
              name="account"
              :rules="[{  required: true , message: '请输入您的账号!' }]"
          >
            <a-input v-model:value="login.account" size="large" placeholder="请输入账号(手机号或者邮箱均可)">
              <template #prefix>
                <UserOutlined class="site-form-item-icon" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item
              name="password"
              :rules="[{ required: true, message: '请输入您的密码!' }]"
          >
            <a-input-password v-model:value="login.password" size="large"  placeholder="请输入账号密码">
              <template #prefix>
                <LockOutlined class="site-form-item-icon" />
              </template>
            </a-input-password>
          </a-form-item>

          <div class="functionBox">
            <a-form-item name="remember">
              <a-checkbox v-model:checked="remember">自动登录</a-checkbox>
            </a-form-item>
            <a-button type="link">忘记密码</a-button>
          </div>

          <a-form-item>
            <a-button type="primary" block html-type="submit" :loading="loginIng" size="large" @click="submit">登录</a-button>
          </a-form-item>
        </a-form>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

  import useLogin from '@/hooks/useLogin';
  import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';


  const { login , remember , submit , loginForm  , loginIng } = useLogin();

</script>


<style scoped lang="scss">
  .page {
    width: 100%;
    height: 100%;
    background: url('../assets/img/backPic.png');
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .contentBoX {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      top: 80px;
      .logo {
        display: flex;
        align-items: center;
        .title {
          font-size: 26px;
          font-weight: bolder;
          margin-left: 12px;
        }
        .icon {
          height: 46px;
          width: 46px;
        }
      }
      .subtitle {
        padding: 16px 0 0 0;
        font-size: 12px;
        letter-spacing: 2px;
        opacity: 0.7;
      }
      .loginBox {
        width: 360px;
        margin-top: 30px;
        .functionBox {
          display: flex;
          width: 100%;
          justify-content: space-between;
        }
      }
    }
  }
</style>
